<template>
    <div class="common-layout">
        <el-container>
            <el-header class="app-header">
                <div class="header-content">
                    <div class="logo">
                        <span class="logo-text">管理系统</span>
                    </div>

                    <div class="header-actions">
                        <div class="user-info">

                            <span class="username">{{ user.realName || '未登录' }}</span>
                            <span class="user-caret"><el-image :src="user.images"
                                    style="width: 30px; height: 30px; padding-left: 5px;"></el-image>
                            </span>
                            <span class="user-caret" @click="logout()">
                                <el-icon size="20" style="color: red;">
                                    <SwitchButton />
                                </el-icon>
                            </span>
                        </div>
                    </div>
                </div>
            </el-header>

            <el-container class="main-container">
                <el-aside width="200px" class="app-sidebar">
                    <el-menu default-active="2" class="sidebar-menu" router unique-opened background-color="#2d3748"
                        text-color="#e2e8f0" active-text-color="#ffffff" style="height: 100%;">
                        <el-sub-menu v-for="item in menu" :key="item.id" :index="item.path || item.id.toString()">
                            <template #title>
                                <span class="menu-title">{{ item.name }}</span>
                            </template>

                            <el-menu-item v-for="child in (item.children || [])" :key="child.id" :index="child.path"
                                class="sub-menu-item">
                                {{ child.name }}
                            </el-menu-item>
                        </el-sub-menu>
                    </el-menu>
                </el-aside>

                <el-main class="app-content">
                    <div class="content-container">
                        <RouterView />
                    </div>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script setup>
import { MenuJS } from '@/api/menu/menu';
import { loginUserJS } from '@/api/user/user';
import router from '@/router';
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';

// 获取路由信息
const route = useRoute();

// 状态管理
const username = localStorage.getItem("username");
const menu = ref([]);
const user = ref({})
function getUser() {
    loginUserJS(username)
        .then(res => {
            // 兼容请求封装返回 data 或 data.data 的两种情况
            user.value = (res && res.data) ? res.data : (res || {});
        })
        .catch(() => {
            user.value = {};
        })
}
getUser()
// 加载菜单列表
function loadMenuList() {
    MenuJS(username)
        .then(res => {
            const data = Array.isArray(res) ? res : (res && res.data);
            if (Array.isArray(data)) {
                // 处理菜单数据，确保children为数组
                menu.value = data.map(item => ({
                    ...item,
                    children: item.children || []
                }));
            } else {
                console.error('菜单数据格式错误:', res);
                menu.value = [];
            }
        })
        .catch(error => {
            console.error('加载菜单失败:', error);
            menu.value = [];
        });
}
function logout() {
    localStorage.removeItem("username")
    router.push("/")
}
// 组件挂载时加载菜单
onMounted(() => {
    loadMenuList();
});

</script>

<style scoped>
/* 全局布局样式 - 控制整体滚动 */
.common-layout {
    height: 100vh;
    /* 使用固定高度而非min-height */
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    color: #333;
    background-color: #f8fafc;
    /* overflow-y: auto;  */
    overflow: hidden;
}

/* 头部样式 */
.app-header {
    background-color: #1e40af;
    color: white;
    height: 60px !important;
    padding: 0 24px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 10;
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}

.logo {
    display: flex;
    align-items: center;
    font-weight: 600;
}

.logo-text {
    font-size: 18px;
    letter-spacing: 0.5px;
}

.header-actions {
    display: flex;
    align-items: center;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.user-info:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.username {
    font-size: 14px;
    font-weight: 500;
}

.user-caret {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
}

/* 主容器 */
.main-container {
    height: calc(100% - 60px);
    /* 基于父容器计算高度 */
    display: flex;
    /* 确保侧边栏和内容区域并排显示 */
    overflow: hidden;
}

/* 侧边栏样式 - 禁止自身滚动 */
.app-sidebar {
    background-color: #2d3748;
    color: #e2e8f0;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    overflow-y: auto;
    /* 禁止侧边栏出现滚动条 */
    height: calc(100vh - 60px);
}

.sidebar-menu {
    border-right: none;
    width: 100%;
    padding-top: 16px;
    height: auto;
}

.el-sub-menu__title {
    height: 50px;
    line-height: 50px;
    padding-left: 30px !important;
    transition: all 0.2s ease;
    position: relative;
}

.el-sub-menu__title::after {
    content: "▶";
    position: absolute;
    right: 15px;
    font-size: 12px;
    transition: transform 0.2s ease;
}

.el-sub-menu__title.is-opened::after {
    transform: rotate(90deg);
}

.el-sub-menu__title:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.el-sub-menu__title.is-active {
    background-color: rgba(255, 255, 255, 0.15) !important;
}

.menu-title {
    font-size: 15px;
}

/* 二级菜单样式 */
.sub-menu-item {
    height: 45px;
    line-height: 45px;
    padding-left: 50px !important;
    transition: all 0.2s ease;
    font-size: 14px;
}

.sub-menu-item:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

.sub-menu-item.is-active {
    background-color: #1e40af !important;
    color: #ffffff !important;
    font-weight: 500;
}

/* 主内容区域 - 禁止自身滚动 */
.app-content {
    background-color: #ffffff;
    padding: 24px;
    overflow-y: auto;
    /* 禁止内容区域出现滚动条 */
    flex: 1;
    /* 占满剩余空间 */
    height: calc(100vh - 60px);
}

/* 页面标题栏 */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f1f5f9;
}

.page-title {
    font-size: 22px;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
}

.page-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #64748b;
}

.breadcrumb-separator {
    font-size: 12px;
}

/* 内容容器 */
.content-container {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    padding: 24px;
    min-height: auto;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .app-header {
        padding: 0 16px;
    }

    .app-sidebar {
        width: 100% !important;
        height: auto;
    }

    .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .sub-menu-item {
        padding-left: 40px !important;
    }
}
</style>
